import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login/'
import Layout from '@/views/Layout'
import Home from '@/views/Layout/Home'
import Articles from '@/views/Layout/Articles'
import NotFound from '@/views/NotFound'
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/articles',
        component: Articles
      }
    ]
  },
  {
    // 匹配所有的路由,所以404需要最后配置
    path: '*',
    redirect: '/404'
  },
  {
    path: '/404',
    component: NotFound
  }
]
const router = new VueRouter({
  routes
})
// 注册前置导航守卫
// 回调函数 会在路由发生跳转的时候执行
// to : 到哪去
// from : 从哪里来
// next : 必须调用的函数
// next() 代表放行
// next('/login') 代表拦截到具体的地址
// 守卫的逻辑
// 1. 从缓存中获取token
// 2. 判断是否有token
// 3. 如果有token直接放走
// 4. 如果没有token,继续判断 去的 页面是否是 登录页或者404
// 5. 如果是,直接放走
// 6. 否则,拦截到登录页面
// 白名单: 不用登录就能访问
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  // const token = localStorage.getItem('token')
  // if (token) {
  //   return next()
  // }
  // // 没有token
  // // if (to.path === '/login' || to.path === '/404') {
  // //   return next()
  // // }
  // if (whiteList.includes(to.path)) {
  //   return next()
  // }
  // // 拦截到登录页
  // next('/login')
  const token = localStorage.getItem('token')
  if (token || whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
})
export default router
